<template>
  <el-dialog
      v-model="dialogVisible"
      title="确认保存"
      width="800px"
      :before-close="handleClose"
      class="PurchaseSaveConfirm"
  >
    <el-alert
        title="请再次检查采购信息是否正确，确认后将保存本次采购记录。"
        type="warning"
        :closable="false"
        class="PurchaseSaveConfirm-alert"
    />

    <!-- 基本信息预览 -->
    <el-form label-width="120px" class="PurchaseSaveConfirm-form" :model="info">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input :model-value="info?.orderNo || '-'" class="PurchaseSaveConfirm-form-input" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商">
            <el-input :model-value="info?.supplierName || '-'" class="PurchaseSaveConfirm-form-input" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="下单日期">
            <el-input :model-value="info?.orderDate || '-'" class="PurchaseSaveConfirm-form-input" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input :model-value="info?.note || '-'" class="PurchaseSaveConfirm-form-input" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 商品明细表格 -->
    <el-table :data="items || []" class="PurchaseSaveConfirm-table" border stripe>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="code" label="商品编码" min-width="120" align="center" />
      <el-table-column prop="name" label="商品名称" min-width="160" align="center" />
      <el-table-column prop="unit" label="单位" width="100" align="center" />
      <el-table-column prop="quantity" label="数量" width="120" align="center" />
      <el-table-column prop="unitPrice" label="单价(¥)" width="120" align="center">
        <template #default="{ row }">{{ formatMoney(row.unitPrice) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="小计(¥)" width="140" align="center">
        <template #default="{ row }">{{ formatMoney(row.totalPrice) }}</template>
      </el-table-column>
    </el-table>

    <!-- 合计金额摘要 -->
    <div class="PurchaseSaveConfirm-summary">
      <div class="PurchaseSaveConfirm-summary-row">
        <div class="PurchaseSaveConfirm-summary-label">合计金额：</div>
        <div class="PurchaseSaveConfirm-summary-value">¥ {{ formatMoney(info?.totalAmount) }}</div>
      </div>
    </div>

    <template #footer>
      <div class="PurchaseSaveConfirm-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  visible: { type: Boolean, default: false },
  info: { type: Object, default: null },
  items: { type: Array, default: () => [] }
})
const emits = defineEmits(['update:visible', 'confirm'])

const dialogVisible = ref(false)

watch(() => props.visible, (v) => {
  dialogVisible.value = v
})
watch(dialogVisible, (v) => {
  if (!v) emits('update:visible', false)
})

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  // 仅透传事件，占位后续保存逻辑
  emits('confirm', { info: props.info, items: props.items })
}

const formatMoney = (v) => Number(v || 0).toFixed(2)
</script>

<style scoped lang="scss">
.PurchaseSaveConfirm {
  &-alert { margin-bottom: 16px; }

  &-form {
    padding: 16px 0;

    &-input { width: 100%; }
  }

  &-table {
    width: 100%;
  }

  &-summary {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;

    &-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    &-label {
      font-size: 14px;
      color: #606266;
    }

    &-value {
      font-size: 16px;
      color: #303133;
      font-weight: 600;
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
